<template>
  <div class="wrapper">
    <div class="locationBox" @click="selectAdd('return')">
      <text class="meth_title">Return address</text>
      <div class="meth_right">
        <div class="cityName">
          <text class="cityName">{{postData.refund_name}} {{postData.refund_phone }}</text>
          <text class="cityName">{{ postData.refund_address}}</text>
        </div>
        <text class="rightIcon">&#xe6a1;</text>
      </div>
    </div>
    <div
      class="locationBox"
      @click="selectAdd('take')"
      v-if="preveDate.take_type.indexOf('3')>-1||preveDate.take_type.indexOf('1')>-1"
    >
      <!-- // 自提地址 和取货地址 -->
      <text class="meth_title">Transaction address</text>
      <div class="meth_right">
        <div class="cityName">
          <text class="cityName">{{postData.trade_name}} {{postData.trade_phone }}</text>
          <text class="cityName">{{postData.trade_address}}</text>
        </div>
        <text class="rightIcon">&#xe6a1;</text>
      </div>
    </div>
    <!-- 
        <div class="locationBox" v-if="preveDate.take_type.indexOf('3')!=-1">
        <text class="meth_title">takeTime</text>
        <div class="meth_right"> 
          <input class="timeInput" type="time" v-model="startTime" />
          <text class="line">-</text>
          <input class="timeInput" type="time" v-model="endTime" /> 
        </div>
      </div>
    -->
    <text class="confirmBtn" @click="postShop">Confirm</text>
    <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
      <floading class="indicator" color="#303030"></floading>
    </div>
    <wxc-popup
      height="562"
      pos="bottom"
      ref="wxcpopup"
      :show="pickerShow"
      @wxcPopupOverlayClicked="pickerShow=false"
    >
      <div class="popTop"></div>
      <am-date-picker-view format="YYYY-MM-DD" v-model="value1" :minuteStep="60"></am-date-picker-view>
    </wxc-popup>
  </div>
</template>

<script>
import { AmDatePickerView } from "weex-amui";
import { WxcPopup } from "weex-ui";
import { add_twohand_goods, edit_twohand_goods } from "../../mixin/ajax.js";
const postAddress = new BroadcastChannel("postAddress");
export default {
  components: {
    AmDatePickerView,
    WxcPopup
  },
  props: {
    preveDate: {
      default: {}
    }
  },
  data() {
    return {
      setType: "return",
      timeType: "start",
      endTime: "",
      startTime: "",
      pickerShow: false,
      value1: "",
      postData: {
        refund_name: "",
        refund_phone: "",
        refund_address: "",
        trade_address: ""
      }
    };
  },
  created() {
    postAddress.onmessage = this.setAdress;
    this.getPostData();
  },
  methods: {
    postShop() {
      let that = this;
      /**取消地址 */
      // if (
      //   !that.postData.refund_name ||
      //   !that.postData.refund_phone ||
      //   !that.postData.refund_address
      // ) {
      //   that.toast("Please set return");
      //   return false;
      // }
      // // 自提地址
      // if (this.preveDate.take_type.indexOf("1") > -1) {
      //   if (!that.postData.trade_address) {
      //     that.toast("Please set trade_address");
      //     return false;
      //   }
      // }
      // if (this.preveDate.take_type.indexOf("3") > -1) {
      //   if (!that.postData.trade_address) {
      //     that.toast("Please set trade_address");
      //     return false;
      //   }
      // }
      Object.assign(that.postData, that.preveDate);
      that.savePostData(that.postData);
      that.saveData();
    },
    saveData() {
      this.isLoading = true;
      let that = this;
      if (this.postData.id) {
        edit_twohand_goods(this.postData, (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.message) {
              that.toast(res.message);
            }
            if (res.code == 200) {
              var pref = weex.requireModule("storage");
              pref.removeItem("postData");
              const editSell = new BroadcastChannel("editSell");
              editSell.postMessage("update");
              that.back();
            }
          }
        });
      } else {
        add_twohand_goods(this.postData, (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.message) {
              that.toast(res.message);
            }
            if (res.code == 200) {
              var pref = weex.requireModule("storage");
              pref.removeItem("postData");
              that.back();
            }
          }
        });
      }
    },
    getPostData() {
      let that = this;
      var pref = weex.requireModule("storage");
      pref.getItem("postData", event => {
        if (event.result == "success") {
          var value = JSON.parse(event.data);
          Object.assign(this.postData, value);
          if (value.take_time) {
            that.startTime = value.take_time.split("-")[0];
            that.endTime = value.take_time.split("-")[1];
          }
        }
      });
    },
    selectAdd(type) {
      this.setType = type;
      this.push("root:app/user/address/address.js", { type: "post" });
    },
    setAdress(row) {
      let data = row.data;
      if (this.setType == "return") {
        Object.assign(this.postData, {
          refund_name: data.name,
          refund_phone: data.phone,
          refund_address:
            data.address +
            "," +
            data.area +
            "," +
            data.city +
            "," +
            data.province +
            " " +
            data.postal_code
        });
        this.savePostData(this.postData);
      } else {
        Object.assign(this.postData, {
          trade_name: data.name,
          trade_phone: data.phone,
          trade_address:
            data.address +
            "," +
            data.area +
            "," +
            data.city +
            "," +
            data.province+
            " " +
            data.postal_code
        });
        this.savePostData(this.postData);
      }
    },
    savePostData(data) {
      var pref = weex.requireModule("storage");
      pref.setItem("postData", JSON.stringify(data));
    },
    onOK(value) {
      if (this.timeType == "start") {
        this.startTime = value;
      } else {
        this.endTime = value;
      }
    }
  }
};
</script>

<style scoped>
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.wrapper {
  background-color: #f5f5f5;
}
.popTop {
  height: 88px;
}
.locationBox {
  width: 750px;
  /* border-bottom-style: solid;
		border-bottom-color: #e6e6e6;
		border-bottom-width: 2px; */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  padding: 32px 32px;
  margin-bottom: 20px;
  background-color: #ffffff;
}
.locationBox:active {
  background-color: #f2f2f2;
}

.meth_title {
  color: #323232;
  font-size: 30px;
  width: 230px;
}
.timeInput {
  padding: 10px 10px;
  background-color: #eee;
  height: 50px;
  width: 150px;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
}
.line {
  font-size: 24px;
  margin: 0 20px;
  text-align: center;
}

.meth_right {
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
}

.cityName {
  margin-right: 30px;
  font-size: 28px;
  color: #999999;

  text-align: right;
  flex: 1;
}

.rightIcon {
  font-family: iconfont;
  font-size: 26px;
  color: #999;
}
.confirmBtn {
  width: 686px;
  height: 90px;
  line-height: 90px;
  border-radius: 10px;
  margin-bottom: 14px;
  position: fixed;
  bottom: 32px;
  left: 32px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.confirmBtn:active {
  background-color: #222222;
}
</style>
